<template>
  <dw-page-warpper>
    <DragCol ref="dragColRef" height="100%" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5">
      <template #left>
        <category-tree @currentNodeChange="currentNodeChange"></category-tree>
      </template>
      <template #right>
        <business-service-form-grid ref="businessServiceRef" @handleSelect="handleSelect"></business-service-form-grid>
      </template>
    </DragCol>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { DragCol } from '@/components/vue-resizer';
import { ref } from 'vue';
import type { IBusinessCategory } from './business-service';
import BusinessServiceFormGrid from './components/service.vue';
import CategoryTree from './components/category.vue';
defineOptions({
  name: 'SysDict',
});

const businessServiceRef = ref();
const currentNodeChange = (nodeData: IBusinessCategory, isEdit: boolean) => {
  if (isEdit) {
    businessServiceRef.value.setBusinessCategoryId(nodeData.id);
  } else {
    businessServiceRef.value.loadData(nodeData.id);
  }
};
const dragColRef = ref();
const handleSelect = (newValue: string) => {
  if (newValue != 'datagrid') {
    dragColRef.value.hiddenLeft();
  } else {
    dragColRef.value.showLeft();
  }
};
</script>
